Transition layer example

This example shows the use of transition layers for transitioning between layers. To show how transition layers work, the example uses a memory game where the objective is to find pairs of 3D scenes shown on the front of cards. To make things more interesting, the transition layers switch places during the game through animations. The transition layers consist:

• The transition layer itself.
• The initially shown image layer (the question mark on the back of the card)
• A viewport layer, which contains the scene on the front of cards.

The transitions are ran through a custom transition animation path and using a custom transition shader. The animations are created and launched in the program code as part of the game logic.

The transition layers in this example use the following features:

• Image layer. The image layer is a 2D layer that displays an image. Define the layout width and height for the layer, otherwise the size is inherited from the image.
• Viewport layer. The viewport layer can display a single scene. One scene can only be used for one layer at a time. This is the reason the pairs in the example are implemented as copies of the original scenes. Although not used in this example, you can set the background of an overlain viewport layer transparent by defining a scene composer.
• Transition layer. The transition layer can contain a number of other layers and you can use it to transition from one visible layer to another. A transition can be launched, for example, from an application event by invoking the Transition Layer: Start Transition action. You can define a transition target layer as Next, Previous (based on the order of the layers under the transition layer) or defined (the target layer needs to be selected).
  Under the transition layer properties, you can select the Transition duration, animation and material. If not defined, the default animation for Phase and the default transition material is used. The Phase, Source layer and Target Layer properties differ from the transition target properties for invoked action. These properties are useful for testing transitions in Kanzi Studio: After defining the source and target layer, you can use the Phase slider to see how the transition progresses.
  For later use, the Target layer should be undefined and Phase set to zero. You can select as the source layer any visible layer that is shown when the application starts.
• Transition shader and transition phase animations. The default transition material uses a simple transition shader that blends between the current source and target transitions based on the Phase parameter. With the default animation, Phase runs linearly from 0 to 1, but with a custom animation the path can be anything as long at it starts from 0, ends with 1 and stays between these values during the transition. The custom transition shader in this example uses a circular mask shape that grows and shrinks towards the center of the layer gradually revealing the target layer.

You can find the example in <KanziWorkspace>/Examples/Transition_layer.

See also

Layers

Open topic with navigation